<template>
    <div class="message">
        <div class="search">
            <el-input v-model="inputUsername" placeholder="请输入名字"></el-input>
            <PCSelectDate class="expansion" v-if="!PCTableShow"></PCSelectDate>
            <PhoneSelectDate v-if="PCTableShow" />
            <el-button type="primary">搜索</el-button>
        </div>

        <el-row>
            <el-button type="primary" @click="handleInsert" size="mini">新增</el-button>
            <el-button type="danger" @click="handleDeleteBatch" size="mini">批量删除</el-button>
            <!-- 新增弹窗 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                :width="manage.width"
                >
                <!-- 内容 -->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="即时配送">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="活动性质">
                        <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="特殊资源">
                        <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="活动形式">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 操作 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>

        <el-table
            ref="multipleTable"
            :data="tempTableData"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            border
            >
            <el-table-column type="expand" key="tableColumn" v-if="PCTableShow">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称:">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <br>
                    <el-form-item label="所属店铺:">
                        <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <br>
                    <el-form-item label="商品 ID:">
                        <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <br>
                    <el-form-item label="店铺 ID:">
                        <span>{{ props.row.shopId }}</span>
                    </el-form-item>
                    <br>
                    <el-form-item label="商品分类:">
                        <span>{{ props.row.category }}</span>
                    </el-form-item>
                    <br>
                    <el-form-item label="店铺地址:">
                        <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <br>
                    <el-form-item label="商品描述:">
                        <span>{{ props.row.desc }}</span>
                    </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnId" label="商品 ID" v-if="tableShow === false ? 0 : 1" prop="id"></el-table-column>
            <!-- <el-table-column show-overflow-tooltip key="tableColumnName" label="商品名称" v-if="tableShow === false ? 0 : 1" prop="name"></el-table-column> -->
            <el-table-column show-overflow-tooltip key="tableColumnName" label="商品名称" prop="name"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnDesc" v-if="tableShow === false ? 0 : 1" label="描述" prop="desc"></el-table-column>

            <el-table-column label="操作" width="144">
                <template slot-scope="scope">
                    <div class="btnEditDel">
                        <el-button class="btnEdit" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- <br class="btnEditDelMid" v-show="PCTableShow"> -->
                        <el-button class="btnDel" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <PCPage />
            <PhonePage />
        </div>
        
    </div>
</template>


<script>
import PCSelectDate from '@/components/slot/SelectTime/PCSelectDate'
import PhoneSelectDate from '@/components/slot/SelectTime/PhoneSelectDate'
import PCPage from '@/components/slot/SelectPage/PCPage'
import PhonePage from '@/components/slot/SelectPage/PhonePage'
import {mapState,mapMutations} from 'vuex'
export default {
    name: "MessageSolt",
    components:{
        PCSelectDate,
        PhoneSelectDate,
        PCPage,
        PhonePage
    },
    computed:{
        ...mapState('Public',['publicWidth','manage']),
        ...mapState('TempData',['tempTableData'])
    },
    data() 
    {
        return {
            PCTableShow:false,
            tableShow:false,
            inputUsername:'',
            dialogVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        }
    },
    watch:{
        /**
         * 改变PC和移动端的表格
         */
        publicWidth()
        {
            this.EidtWindow()
        }
    },
    created() 
    {
        /**
         * 改变PC和移动端的表格
         */
        this.EidtpublicWidth(document.body.clientWidth)
        this.EidtWindow()
    },
    methods: {
        /**
         * Element-ui源代码
         */
        toggleSelection(rows) 
        {
            if (rows) 
            {
                rows.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row);
                });
            } 
            else 
            {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) 
        {
            this.multipleSelection = val;
        },

        /**
         * EidtpublicWidth:更改窗口大小
         */
        ...mapMutations('Public',['EidtpublicWidth']),
        /**
         * 改变PC和移动端的表格
         */
        EidtWindow()
        {
            if(this.publicWidth <= 540)
            {
                this.PCTableShow = true
                this.tableShow = false
            }
            else
            {
                this.PCTableShow = false
                this.tableShow = true
            }   
        },

        //修改数据
        handleEdit(index, row) 
        {
            console.log(index, row);
        },
        //删除数据
        handleDelete(index, row) 
        {
            console.log(index, row);
        },
        handleInsert()
        {
            this.dialogVisible = true
            this.save()
        },
        handleDeleteBatch()
        {
            
        },
        save()
        {
            console.log('更新数据');
        },
    }
}
</script>

<style lang="less" scoped>
    .demo-table-expand {
        font-size: 0;
        padding: 0 5px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        border-bottom: 1px dashed #ebebeb;
        width: 100%;
    }
    .message
    {
        .el-row
        {
            padding: 0 0 10px 0;
        }
    }
    .search
    {
        display: flex;
        padding: 0 0 10px 0;
        .el-input
        {
            width: 200px;
        }
        .expansion
        {
            margin: 0 10px;
        }
    }
    .page
    {
        padding: 10px 0;
    }


    @media all and (max-width: 540px)
    {
        .search
        {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .el-date-picker
            {
                width: 100%;
            }
            .el-input
            {
                width: 100% !important;
            }
            .el-button
            {
                width: 100%;
            }
        }
    }
</style>